@import "../../../assets/sass/mixin";
@import "../../../assets/sass/variables";

$theme: theme-line, theme-block;

.free-tab-group {
  @each $type in $theme {
    @if $type == 'theme-block' {
      &.#{$type} {
        ul.free-tab-navs {
          background: $default;
          border: none;
          li span {
            color: #fff;
          }
        }

        .free-tab-nav span:after {
          height: 0;
        }
      }
    } @else {
      ul.free-tab-navs {
        background: #fff;
        border-bottom: 1px solid #d9d9d9;
        li span {
          color: #333;
        }
      }

      .free-tab-nav.active span {
        font-weight: bold;
        &:after {
          transform: scale(1);
        }
      }
      .free-tab-nav span:after {
        position: absolute;
        bottom: -1px;
        left: 0;
        content: "";
        width: 100%;
        height: 2px;
        background: $default;
        transform: scale(0);
        transition: all .3s;
      }
    }
  }

  @include boxShadow;

  ul.free-tab-navs {
    @include flexbox;
    padding: .2rem .2rem 0;
    margin: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  &.free-tab-right > free-tab-nav > ul.free-tab-navs {
    justify-content: flex-end
  }

  &.free-tab-center > free-tab-nav > ul.free-tab-navs {
    justify-content: center
  }

  ul.free-tab-navs {
    &:after {
      display: table;
      content: '';
      clear: both;
    }
    & > li.free-tab-nav {
      list-style: none;
      cursor: pointer;
      span {
        position: relative;
        display: inline-block;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        padding: .25rem 1rem;
      }

      &.free-tab-disabled {
        cursor: default !important;
        opacity: .7;
      }
    }
  }

  .free-tab-box {
    position: relative;
    overflow: hidden;
    &:after {
      display: table;
      content: '';
      clear: both;
    }

    free-tab {
      width: 100%;
      flex-shrink: 0;
      border-top: 0;
    }

    .free-tab {
      display: none;
      .free-tab-wrapper {
        width: 100%;
        background: #fff;
        padding: .75rem;
      }
      &.free-iscroll {
        overflow: hidden;
        overflow-y: auto;
      }

      &.active {
        display: block;
        //flex-wrap: wrap;
      }
    }
  }

  &.free-tab-vertical {
    display: flex;
    box-shadow: none;

    &.free-tab-right {
      free-tab-nav {
        order: 2;

        ul {
          border: 1px solid #d9d9d9;
          border-left: none;

          & > li {
            &.active {
              span {
                &:after {
                  background: #fff;
                  bottom: 0;
                  top: 0;
                  left: -2px;
                  right: auto;
                  width: 4px;
                  height: 100%;
                  z-index: 1;
                }
              }
            }
          }
        }
      }
    }

    free-tab-nav {
      ul {
        flex-direction: column;
        border: 1px solid #d9d9d9;
        border-right: none;
        border-radius: 0px;
        padding: 0 !important;

        & > li {
          line-height: 30px;
          min-width: 60px;
          border-bottom: 1px solid #d9d9d9;
          &:last-child {
            border-bottom: none;
          }
          &.active {
            span {
              color: #222;
              margin: 0 -1px 0 0;
              background: #fff;
              &:after {
                background: #fff;
                bottom: 0;
                top: 0;
                left: auto;
                right: -2px;
                width: 4px;
                height: 100%;
                z-index: 1;
              }
            }
          }
          & > span {
            &:after {
              transition: none;
            }
            width: 100%;
            color: #777;
            white-space:nowrap;
            padding: .25rem .75rem !important;
          }
        }
      }
    }

    .free-tab-box {
      border: 1px solid #d9d9d9;
    }
  }
}


